<template>
    <div class="tool" style="display: flex;margin: 20px 0;">
        <el-select
            v-model="subject_id"
            clearable
            style="width: 240px;margin-right: 20px;"
        >
            <el-option
                v-for="item in subjects"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
        </el-select>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
    </div>

    <el-table :data="rates" class="glass-table" style="width: 100%">
        <el-table-column label="时间" prop="test_date" width="180"/>
        <el-table-column label="科目" width="180">
            <template #default="scope">
                {{ scope.row.subject.name }}
            </template>
        </el-table-column>
        <el-table-column label="参与率" prop="cy_rate" width="180"/>
        <el-table-column label="及格率" prop="jg_rate"/>
        <el-table-column label="优良率" prop="lh_rate"/>
        <el-table-column label="优秀率" prop="ex_rate"/>
        <el-table-column label="最高分" prop="max_score"/>
        <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="scope">
                <el-button
                    link
                    size="small"
                    type="primary"
                    @click="handleViewClick(scope.row)"
                >
                    查看
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="pagination-block" style="margin-top: 20px; display: flex; justify-content: flex-end;">
        <el-pagination :current-page="currentPage" :default-page-size="10" :total="total"
                       background
                       layout="prev, pager, next"
                       size="small"
                       @current-change="handleCurrentChange"
        />
    </div>
    <el-dialog v-if="dialogVisible" v-model="dialogVisible" title="考核信息" width="1100">
        <el-row style="margin: 10px;">
            <el-col :span="6">
                考核日期: {{ detail.test_date }}
            </el-col>
            <el-col :span="6">
                参与率: {{ detail.cy_rate }}
            </el-col>
            <el-col :span="6">
                及格率: {{ detail.jg_rate }}
            </el-col>

            <el-col :span="6">
                良好率: {{ detail.lh_rate }}
            </el-col>

        </el-row>
        <el-row style="margin: 10px;">

            <el-col :span="6">
                最高分: {{ detail.max_score }}
            </el-col>
            <el-col :span="6">
                科目名: {{ detail.subject.name }}
            </el-col>
            <el-col :span="6">
                应考人数: {{ detail.yk_number }}
            </el-col>

            <el-col :span="6">
                实考人数: {{ detail.yk_percent }}
            </el-col>
        </el-row>
        <SubjectDetail :row="row" :subjectDetial="subjectDetial"/>
    </el-dialog>
</template>
<script lang='ts' setup>
import {onMounted, ref} from 'vue'
import SubjectDetail from "./SubjectDetail.vue";

const subjects = ref([])
const subject_id = ref("")
const currentPage = ref(1)
const total = ref(0)
const dialogVisible = ref(false)
const detail = ref({})
const subjectDetial = ref([])
const getSubjects = () => {
    axios.get('/api/score-subjects').then((response) => {
        subjects.value = response.data.data
        subjects.value = subjects.value.map((item: any) => {
            return {
                value: item.id,
                label: item.name,
            }
        })
    })
}
const handleViewClick = (row) => {
    dialogVisible.value = true
    detail.value = row
    getSubjectDetial(row)
}

const getSubjectDetial = (row) => {
    axios.get('/api/score-subject-details', {
        params: {
            subject_id: row.subject.id,
            test_date: row.test_date
        }
    }).then((response) => {
        subjectDetial.value = response.data.data.data
    })
}

getSubjects()
const rates = ref([])

onMounted(() => {
    getRate()
})
const getRate = () => {
    axios.get('/api/score-rates', {
        params: {
            subject_id: subject_id.value
            , page: currentPage.value
        }
    }).then((response) => {
        rates.value = response.data.data
        currentPage.value = response.data.score.current_page
        console.log(currentPage.value)
        total.value = response.data.score.total
        console.log(response.data.pagination.total)
    })
}
const handleCurrentChange = (number) => {
    currentPage.value = number
    getRate()
}

const handleSearch = () => {
    getRate()
}
</script>
<style>

</style>
